<template>
    <div class="rx-custom-layout">
        <div class="rx-custom-header" :style="layoutStyle.header"  v-if="$slots.header">
            <slot name="header"></slot>
        </div>
        <div class="rx-container-box">
            <div class="rx-custom-left" v-if="$slots.left" :style="layoutStyle.left" >
                <div class="item-layout-box" >
                    <slot name="left"></slot>
                </div>
            </div>
            <div class="rx-custom-center">
                <div class="center-header" :style="layoutStyle.inheader" v-if="$slots.inheader">
                    <slot name="inheader"></slot>
                </div>
                <div class="center-center" v-if="$slots.center" :style="layoutStyle.center">
                    <div class="item-layout-box"  >
                        <slot name="center"></slot>
                    </div>
                </div>
                <div class="center-footer" :style="layoutStyle.infooter" v-if="$slots.infooter">
                    <slot name="infooter"></slot>
                </div>
            </div>
            <div class="rx-custom-right" v-if="$slots.right" :style="layoutStyle.right" >
                <div class="item-layout-box" >
                    <slot name="right"></slot>
                </div>
            </div>
        </div>
        <div class="rx-custom-footer" :style="layoutStyle.footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>

export default {
    name: "LayoutView",
    components: {},
    props: {
        allModel:{}
    },
    data() {
        return {
            layoutStyle:{
                header:'',
                inheader:'',
                left:'',
                right:'',
                footer:'',
                infooter:'',
                center:'',
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        init(){
            //如果有自定义样式：则加入自定义样式
            let mod = ['header','inheader','center','left','right','footer','infooter'];
            for (let i = 0; i < mod.length; i++) {
                if(this.allModel[mod[i]]){
                    this.layoutStyle[mod[i]]=this.allModel[mod[i]].toolStyle;
                }
            }
        }
    },
    watch: {
        'allModel':{
            handler:function (val,old) {
                this.init();
            },
            deep:true
        }
    },
}
</script>

<style scoped>
.rx-custom-layout{
    width: 100%;
    height: 100%;
    font-size: 14px;
    display: flex;
    text-align: left;
    flex-direction: column;
    padding: 10px;
    /*background: #f0f2f5;*/
}
.rx-custom-layout  .item-layout-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
}
.rx-custom-header,
.rx-custom-footer,
.center-header,
.center-footer{
    min-height: 60px;
    position: relative;
    /*overflow: auto;*/
    /*  注释的样式会出现横向滚动条*/
    background: #fff;
}
.rx-custom-header,
.center-header{
    margin-bottom: 10px;
}
.rx-custom-footer,
.center-footer{
    margin-top: 10px;
}
.rx-container-box{
    flex: 1;
    display: flex;
    /*border: 1px solid #dadde0;*/
}
.rx-custom-left,
.rx-custom-center,
.rx-custom-right{
    position: relative;
}
.rx-custom-left,
.rx-custom-right{
    width: 200px;
    background: #fff;
}
.rx-custom-left{
    margin-right: 10px;
}
.rx-custom-right{
    margin-left: 10px;
}
.rx-custom-center{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.center-center{
    flex: 1;
    position: relative;
    background: #fff;
}
</style>
